<template>
	<div class="register">
		<el-row>
			<el-col :span="3">
				<div class="grid-content grid-flex">
					<i class="el-icon-back icon-left" @click="goBack"></i>
				</div>
			</el-col>
			<el-col :span="3" :offset="18">
				<div class="grid-content grid-flex">
					<i class="el-icon-s-operation icon-left"></i>
				</div>
			</el-col>
		</el-row>
		<!-- <h2>登录页面</h2> -->
		<div class="login-tip">
			<div class="login-img">
				<img src="https://img1.baidu.com/it/u=3880675220,92835199&fm=26&fmt=auto" >
			</div>
			<div class="l-text">
				<h3>注册</h3>
				<!-- <i class="el-icon-bottom"></i> -->
			</div>
		</div>
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm form">
			<el-form-item label="手机号" prop="phone" class="label">
				<el-input type="phone" v-model="ruleForm.phone" autocomplete="off" class="input"></el-input>
			</el-form-item>
			<el-form-item label="用户名" prop="user" class="label">
				<el-input type="text" v-model="ruleForm.user" autocomplete="off" class="input"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="pass" class="label">
				<el-input type="password" v-model="ruleForm.pass" autocomplete="off" class="input"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="checkPass" class="label">
				<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" class="input"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submit">注册</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
// import {DBUser} from '../../db.js'
import {register} from '../../api/api.js'
export default{
	name:'Register',
	data() {
		var checkTel = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入手机号码'))
			} else if (!this.checkMobile(value)) {
				callback(new Error('手机号码不合法'))
			} else {
				callback()
			}
		}
		var checkName = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('不可为空，请输入用户名'))
			}else {
				callback()
			}
		}
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			ruleForm: {
				phone:'',
				user:'',
				pass: '',
				checkPass: '',
			},
			rules: {
				phone: [{ validator: checkTel, trigger: 'blur' }],
				user: [{ validator: checkName, trigger: 'blur' }],
				pass: [{ validator: validatePass, trigger: 'blur'}],
				checkPass: [{ validator: validatePass2, trigger: 'blur'}]
			},
			src:require('../../assets/02.jpg')
		}
	},
	methods: {
		/*
		async submit() {
			// console.log(this.ruleForm)
			let result =await this.$refs.ruleForm.validate();
			// console.log(result)
			if(!result){
				return;
			}else{
				DBUser.addUser({
					...this.ruleForm,
					id:+new Date(),
					userimg:this.src
				})
				this.$message({
					message:'注册成功!',
					type:'success'
				});
				this.$router.push({name:'Login'});
			}
		},*/
		async submit(){
			let result =await this.$refs.ruleForm.validate();
			if(!result){
				return;
			}else{
				let params = {
					phone: this.ruleForm.phone,
					name: this.ruleForm.user,
					psd: this.ruleForm.pass
				};
				register(params).then(res=>{
					console.log(res)
					if(res.data.status==1000){
						this.$message({
							message:'注册成功!',
							type:'success'
						});
						this.$router.push({name:'Login'});
					}else if(res.data.status==1001){
						this.$message({
							message:'用户已存在!,请重新输入',
							type:'false'
						});
					}else{
						this.$message({
							message:'注册失败!',
							type:'false'
						});
					}
				})
			}
		},
		goBack(){
			this.$router.go(-1);
		},
		// 验证手机号
		checkMobile(str) {
			let re = /^1\d{10}$/
			if (re.test(str)) {
				return true;
			} else {
				return false;
			}
		}
	}
}
</script>

<style>
.register .el-row{
	background: #b5d9ff;
}
.register .el-col {
	border-radius: 4vw;
}
.register .grid-content {
	border-radius: 4vw;
	min-height: 12vw;
}
.register .grid-flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.register .icon-left{
	font-weight: 600;
	font-size: 1.25rem;
	color: #fff;
}
.login-tip{
	width: 100%;
	display: flex;
	align-items: flex-end;
}
.login-img{
	width: 50vw;
}
.login-img img{
	width: 100%;
	font-weight: left;
	vertical-align: center;
}
.l-text{
	color: #8ac3ff;
}
.l-text i{
	font-size: 6vw;
	font-weight: 600;
}
.register .form{
	width: 96%;
	margin: 0 auto;
	border: 1px solid #DFDFDF;
	box-sizing: border-box;
}
.register .form .label{
	font-weight: 600;
	font-size: 8vw;
}
.register .form .label:nth-child(1){
	margin-top: 8vw;
}
.register .form .input{
	width: 80%;
}
</style>
